<template>
	<view class="navTabBox">
		<view class="longTab">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;position: relative;" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
				<view class="longItem line1" :style='"width:"+isWidth+"px"' :data-index="index" :class="index===tabClick?'click':'' " v-for="(item,index) in tabTitle" :key="index" :id="'id'+index" @click="longClick(index)">{{item.name}}</view>
				<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
					<view class="underline"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTab',
		props: {
			tabTitle: {
				type: Array,
				default: []
			},
			navTopNum: {
				type: Number,
				default: 3
			},
		},
		data() {
			return {
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft:0,
			};
		},
		watch: {
		    tabTitle(newval,oldval) {
				this.getWith()
			}
		},
		mounted() {
			this.getWith()
		},
		methods: {
			//设置item宽度
			getWith(){
				// console.log(this.navTopNum,"newval,oldval,this.navTopNum")
				var that = this
				// 获取设备宽度
				uni.getSystemInfo({
					success(e) {
						that.isWidth = e.windowWidth / that.navTopNum
					}
				})
			},
			// 导航栏点击
			longClick(index){
				this.childIndex = 0;
				if(this.tabTitle.length>this.navTopNum){
					var tempIndex = index - (this.navTopNum - 1);
					tempIndex = tempIndex<=0 ? 0 : tempIndex;
					this.tabLeft = (index-(this.navTopNum - 1)) * this.isWidth //设置下划线位置
				}
				this.tabClick = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				let obj = {
					type:'big',  //大标题
					index:index,
					data: this.tabTitle[index]
				}
				this.parentEmit(obj)
			},
			parentEmit(data){
				this.$emit('changeTab', data);
			}
		}
	}
</script>

<style lang="scss">
	.navTabBox {
		width: 100%;
		color: #222;
		padding: 5rpx 0;
		.click {
			color: #222;
		}
		.longTab {
			width: 100%;
			background-color: #FFFFFF;
			.longItem{ 
				padding: 10rpx 0;
				// height: 50upx; 
				display: inline-block;
				// line-height: 50upx;
				text-align: center;
				color: #222;
				font-size: 28rpx;
				font-weight: 300;
				&.click{
					font-weight: 700;
				}
			}
			.underlineBox {
				height: 6rpx;
				width: 52rpx;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;
				/* #ifdef MP-ALIPAY */
				position: absolute;
				left: 0;
				bottom: 0;
				/* #endif */
				.underline {
					width: 56rpx;
					height: 6rpx;
					background-color: #333;
				}
			}
		}
	}
</style>
